/*
 * @Description: 
 * @Author: handongliang dongliang.han@12301.cn
 * @Date: 2023-09-15 10:10:42
 * @LastEditTime: 2023-11-27 14:15:17
 */


import styles from './index.module.less';

const SingleBarChart: React.FC<any> = (props) => {
    const {
        color = ['#35F78D', '#0AEBFF', '#FCD24C', '#BEE6F6', '#FCD24C'],
        data = [],
        legendStyle,
        textStyle,
        showRatio,
        formatter = (params: any) => {
            return `${params.value}%`;
        },
        orient = 'horizontal',
        unit,
        unitLabel,
    } = props;

    let total = 0;
    data.map((item: any) => {
        total = total + +item.value;
    });
    return (
        <div className={styles['section-ratio-bar']}>
            <div
                className={`${styles['legend-group']}  ${orient == 'vertical'
                    ? styles['legend-vertical']
                    : styles['legend-horizontal']
                    }`}
            >
                {data.map((item: any, index: any) => (
                    <div
                        key={index}
                        style={{
                            ...textStyle?.axisGap,
                            '--text-color': color[index] || '#fefefe',
                        }}
                        className={`${styles['legend-item']} ${legendStyle ? legendStyle : ''
                            }`}
                    >
                        <div className={styles['legend-icon']}
                            style={{ ...textStyle?.legendIcon, background: `${color[index]}` }}>
                        </div>
                        <div className={styles['legend-description']}>
                            <div className={styles['legend-name']} style={textStyle?.axisLabel}>
                                {item.name}
                            </div>
                            <div className={styles['legend-number']} style={textStyle?.valueLabel}>
                                {formatter ? formatter(item) : item.value}
                                {
                                    unit &&
                                    <span className={styles['legend-unit']} style={textStyle?.unitLabel}>
                                        {unit}
                                    </span>
                                }
                            </div>
                            {
                                showRatio &&
                                <div className={`font-Giorgio  text-[38px] text-white ml-[20px]`}>
                                    {((item.value * 100) / total || 0).toFixed(2)}%
                                </div>
                            }

                        </div>
                    </div>
                ))}
            </div>
            <div className={styles['bar-group']}>
                {data.map((item: any, index: any) => (
                    <div
                        key={index}
                        className={styles['bar-item']}
                        style={{
                            width: `${(item.value * 100) / total}%`,
                            background: `${color[index]}`,
                        }}
                    ></div>
                ))}
            </div>
        </div>
    );
};
export default SingleBarChart;